<template>
  <div class="todo-container">
    <h1>App</h1>

    <!-- 
      自定义事件 
        * 什么是自定义事件
          - 给子组件绑定一个自定义事件
          - 在子组件内部触发自定义事件,父组件的事件函数就可以调用,达到传值的目的
        * 给组件绑定事件
          - 只要给组件绑定事件,则都认为是自定义事件(必须我们自己触发)
          - 如果想要给组件绑定原生事件,则需要使用 `.native` 修饰符
        * 给组件绑定事件的方式
          1. 直接通过 v-on 修饰符绑定
        * 触发当前组件的自定义事件方式
          1. 在组件实例上有一个$emit方法,可以触发当前组件的自定义事件
     -->
    <button @click="handler">
      给content组件绑定一个自定义事件用来接受content组件的传值
    </button>
    <Content ref="content"></Content>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  methods: {
    handler() {
      this.$refs.content.$on("abc", (a, b) => {
        console.log("abc事件触发", a, b);
      });
    },
  },
};
</script>
